<template>
	<div class="layout-padding">
		<div class="layout-padding-auto layout-padding-view">
			<el-row>
				<el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
					<el-form-item :label="t('query.Inventors')" prop="inventor">
						<el-input :placeholder="t('placeholder.please_input_Inventors')" v-model="state.queryForm.inventor" />
					</el-form-item>
					<el-form-item :label="t('query.Institution')" prop="agency">
						<el-input :placeholder="t('placeholder.please_input_Institution')" v-model="state.queryForm.agency" />
					</el-form-item>
					<el-form-item>
						<el-button icon="search" type="primary" @click="getDataList"> {{ t('common.queryBtn') }} </el-button>
						<el-button icon="Refresh" @click="resetQuery">{{ t('common.resetBtn') }}</el-button>
					</el-form-item>
				</el-form>
			</el-row>
			<el-row>
				<div class="tab-head" style="width: 100%">
					<div class="num">{{ t('common.Total') }} {{ state.pagination.total }} {{ locale == 'zh-cn' ? '条' : '' }}</div>
					<el-button icon="Download" type="primary" @click="exportExcelAll">{{ t('common.exportBtnAll') }}</el-button>
					<el-button icon="Download" type="primary" @click="exportExcel">{{ t('common.exportBtn') }}</el-button>
					<el-button icon="tools" type="primary" @click="drawer = true">{{ t('common.Morefields') }}</el-button>
				</div>
				<el-drawer title="更多字段" v-model="drawer">
					<el-checkbox-group v-model="checkListState.checkList" @change="setItemCheckList">
						<el-checkbox
							style="display: block"
							:label="item.label"
							:value="item.value"
							v-for="item in checkListState.checkListOptions"
							:key="item.value"
						/>
					</el-checkbox-group>
				</el-drawer>
			</el-row>
			<el-table
				:data="state.dataList"
				v-loading="state.loading"
				border
				:cell-style="tableStyle.cellStyle"
				:header-cell-style="tableStyle.headerCellStyle"
				@selection-change="selectionChangHandle"
				@sort-change="sortChangeHandle"
			>
				<el-table-column type="selection" width="40" align="center" />
				<el-table-column type="index" :label="t('list.Numbers')" :width="locale == 'zh-cn' ? 55 : 90" />
				<el-table-column prop="inventors" :label="t('list.Inventors')" show-overflow-tooltip width="120">
					<template #default="scope">
						<el-link type="primary" @click="handleGo(scope.row.id)">{{ scope.row.inventors }}</el-link>
					</template>
				</el-table-column>
				<el-table-column prop="primaryInventorCount" :label="t('list.Number_of_times_being_ﬁrst_inventor')" width="180" show-overflow-tooltip />
				<el-table-column prop="primaryInventorName" :label="t('list.First_Inventors')" show-overflow-tooltip :width="locale == 'zh-cn' ? 100 : 150">
				</el-table-column>
				<el-table-column prop="inventor" :label="t('list.Co-inventors')" show-overflow-tooltip :min-width="200" />
				<el-table-column prop="agency" :label="t('list.Institution')" show-overflow-tooltip :min-width="200">
					<!-- <template #default="scope">
						<dict-tag :options="yes_no_type" :value="scope.row.allFlag"></dict-tag>
					</template> -->
				</el-table-column>
				<el-table-column
					prop="industryName"
					:width="150"
					:label="checkListOptionsFn('industryName')"
					show-overflow-tooltip
					v-if="checkListShow('industryName')"
				/>
				<el-table-column
					prop="countryName"
					:width="100"
					:label="checkListOptionsFn('countryName')"
					show-overflow-tooltip
					v-if="checkListShow('countryName')"
				/>
				<el-table-column
					prop="provinceName"
					:width="locale == 'zh-cn' ? 120 : 150"
					:label="checkListOptionsFn('provinceName')"
					show-overflow-tooltip
					v-if="checkListShow('provinceName')"
				/>
				<el-table-column
					prop="cityName"
					:width="locale == 'zh-cn' ? 120 : 150"
					:label="checkListOptionsFn('cityName')"
					show-overflow-tooltip
					v-if="checkListShow('cityName')"
				/>
				<el-table-column
					:width="locale == 'zh-cn' ? 100 : 200"
					prop="appNumber"
					:label="checkListOptionsFn('appNumber')"
					show-overflow-tooltip
					v-if="checkListShow('appNumber')"
				/>
				<el-table-column
					:width="locale == 'zh-cn' ? 100 : 240"
					prop="authNumber"
					:label="checkListOptionsFn('authNumber')"
					show-overflow-tooltip
					v-if="checkListShow('authNumber')"
				/>
				<el-table-column
					prop="fmzlAuthNumber"
					:width="locale == 'zh-cn' ? 150 : 200"
					:label="checkListOptionsFn('fmzlAuthNumber')"
					sortable
					show-overflow-tooltip
					v-if="checkListShow('fmzlAuthNumber')"
				/>
				<el-table-column
					prop="citedNumber"
					:width="locale == 'zh-cn' ? 130 : 200"
					:label="checkListOptionsFn('citedNumber')"
					sortable
					show-overflow-tooltip
					v-if="checkListShow('citedNumber')"
				/>
				<el-table-column
					:width="locale == 'zh-cn' ? 150 : 200"
					prop="innovateScore"
					:label="checkListOptionsFn('innovateScore')"
					sortable
					show-overflow-tooltip
					v-if="checkListShow('innovateScore')"
				/>
				<el-table-column
					:width="locale == 'zh-cn' ? 140 : 220"
					prop="vitalityCycle"
					:label="checkListOptionsFn('vitalityCycle')"
					sortable
					show-overflow-tooltip
					v-if="checkListShow('vitalityCycle')"
				/>
			</el-table>
			<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
		</div>
	</div>
</template>

<script setup lang="ts" name="systemSysMessage">
import { BasicTableProps, useTable } from '/@/hooks/table';
import { useTabcheck } from '/@/hooks/checkList';
import { userCollectPage } from '/@/api/cx/list';
import { useI18n } from 'vue-i18n';
const { t, locale } = useI18n();
const router = useRouter();
// 搜索变量
const queryRef = ref();
// 多选变量
const selectObjs = ref([]) as any;
const multiple = ref(true);

const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: {
		inventor: '',
		agency: '',
	},
	pageList: userCollectPage,
});

const checkListState = reactive({
	checkList: [],
	checkListOptions: [],
	checkListOptionsSetFn: () => {
		return [
			{
				label: t('list.Industry'),
				value: 'industryName',
				check: true,
			},
			{
				label: t('list.Country'),
				value: 'countryName',
				check: true,
			},
			{
				label: t('list.DistrictProvince'),
				value: 'provinceName',
				check: true,
			},
			{
				label: t('list.DistrictCity'),
				value: 'cityName',
			},
			{
				label: t('list.appNumber'),
				value: 'appNumber',
			},
			{
				label: t('list.authNumber'),
				value: 'authNumber',
			},
			{
				label: t('list.fmzlAuthNumber'),
				value: 'fmzlAuthNumber',
			},
			{
				label: t('list.citedNumber'),
				value: 'citedNumber',
			},
			{
				label: t('list.innovateScore'),
				value: 'innovateScore',
			},
			{
				label: t('list.vitalityCycle'),
				value: 'vitalityCycle',
			},
		];
	},
});

// checkList hook
const { checkListOptionsFn, checkListShow, setItemCheckList, init } = useTabcheck(checkListState);
// 更多字段弹窗显示
const drawer = ref(false);

watch(locale, () => {
	init();
});
//  table hook
const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } = useTable(state);

// 清空搜索条件
const resetQuery = () => {
	// 清空搜索条件
	queryRef.value?.resetFields();
	// 清空多选
	selectObjs.value = [];
	getDataList();
};

// 导出excel
const exportExcel = () => {
	downBlobFile('/talent/info/exportCollect', Object.assign(state.queryForm, { ids: selectObjs }), '我的收藏.xlsx');
};

// 全部导出excel
const exportExcelAll = () => {
	downBlobFile('/talent/info/exportCollect', {}, '我的收藏.xlsx');
};

// 多选事件
const selectionChangHandle = (objs: { id: string }[]) => {
	selectObjs.value = objs.map(({ id }) => id);
	multiple.value = !objs.length;
};

// 跳转
function handleGo(talentId: any) {
	router.push({
		path: '/InnovativePlatform/home/TalentPortrait',
		query: {
			talentId: talentId,
		},
	});
}
</script>
<style lang="scss" scoped>
.tab-head {
	display: flex;
	align-items: center;
	margin-bottom: 12px;
	.num {
		margin-right: 10px;
	}
}
</style>
